<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-5 非父子组件间的传值</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <child content="childOne"></child>
        <child content="childTwo"></child>
    </div>

    <script>
        // 发布订阅模式/观察者模式
        // bus 总线 进行非父子组件的传值
        // https://www.cnblogs.com/longdb/p/14682498.html
        // 传递信息使用 bus.$emit("方法名")，接收信息的组件中使用bus.$on("方法名",callback)监听
        Vue.prototype.bus = new Vue();

        Vue.component('child', {
            props: {
                content: String
            },
            data() {
                return {
                    myContent: this.content
                }
            },
            template: '<div @click="handleClick">{{myContent}}</div>',
            methods: {
                handleClick() {
                    // alert(this.myContent)
                    this.bus.$emit('change', this.myContent);
                }
            },
            mounted() {
                var this_ = this;
                this.bus.$on('change', function (msg) {
                    this_.myContent = msg;
                })
            },
        })

        var vm = new Vue({
            el: "#root"
        })
    </script>
</body>

</html>